<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="p-2 database_type_management">
    <el-card shadow="hover" style="margin-bottom: 10px">
      <el-form ref="queryFormRef" :inline="true" size="small" label-width="80px">
        <el-form-item label="库类型名称">
          <el-input v-model="queryParams.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="queryParams.createByName" placeholder="请输入" />
        </el-form-item>
        <el-form-item style="padding-left: 50px">
          <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="hover">
      <el-button type="primary" plain icon="Plus" @click="handleVisible('add')" style="margin-bottom: 15px;">新增</el-button>
      <el-table :data="metaList" v-loading="loading">
        <el-table-column label="序号" align="center" width="80" show-overflow-tooltip fixed="left">
          <template #default="{ $index }">
            {{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="库类型名称" align="center" prop="name" show-overflow-tooltip />
        <el-table-column label="数据库模式" align="center" prop="databaseSchema" show-overflow-tooltip />
        <el-table-column label="访问权限" align="center" prop="permissions" show-overflow-tooltip />
        <el-table-column label="数据格式" align="center" prop="databaseFormat" show-overflow-tooltip />
        <el-table-column label="创建人" align="center" prop="createByName" show-overflow-tooltip />
        <el-table-column label="创建日期" align="center" prop="createTime" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="210" fixed="right">
          <template #default="scope">
            <div>
              <el-tooltip content="查看" placement="top">
                <el-button size="small" link type="primary" @click="handleVisible('view', scope.row)">查看</el-button>
              </el-tooltip>
              <el-tooltip content="修改" placement="top">
                <el-button size="small" link type="primary" @click="handleVisible('arragement', scope.row)">修改</el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="small" link type="primary" @click="handleDelete(scope.row)">删除</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <el-pagination
          v-show="total > 0"
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
  <NewLibrary
    :addVisible="addVisible"
    :dataFormat="dataFormat"
    :accessAuthority="accessAuthority"
    :databaseSchema="databaseSchema"
    :rowData="currentRow"
    :modelType="modelType"
    v-if="addVisible"
    @handleEvent="handleEvent"/>
</template>

<script setup>
import NewLibrary from './component/NewLibrary.vue';
import { getDictValues, deleteOperator, getDatabaseList } from '@/api/metaData';
const currentRow = ref();
const addVisible = ref(false);
const modelType = ref('');
const total = ref(0);
const loading = ref(false);
const metaList = ref([]);
const dataFormat = ref([]);
const accessAuthority = ref([]);
const databaseSchema = ref([]);

// 弹窗的状态控制
const handleVisible = (type, row) => {
  if (type === 'add') {
    currentRow.value = null;
    addVisible.value = true;
    modelType.value = 'add';
  }
  if (type === 'view') {
    currentRow.value = row;
    addVisible.value = true;
    modelType.value = 'view';
  }
  if (type === 'arragement') {
    currentRow.value = row;
    addVisible.value = true;
    modelType.value = 'modify';
  }
};
const handleEvent = (data) => {
  if (data.type === 'add') {
    addVisible.value = false;
    getList();
  }
  if (data.type === 'view') {
    addVisible.value = false;
  }
};

// 查询字典
getDictValues({ dictType: 'metadata_constants', dictLabel: 'data_format' }).then((res) => {
  if (res.data.dictValue) {
    const dictObject = JSON.parse(res.data.dictValue) || {};
    dataFormat.value = Object.keys(dictObject).map(key => ({
      value: key,
      label: dictObject[key]
    }));
  }
});
getDictValues({ dictType: 'metadata_constants', dictLabel: 'access_authority' }).then((res) => {
  if (res.data.dictValue) {
    const dictObject = JSON.parse(res.data.dictValue) || {};
    accessAuthority.value = Object.keys(dictObject).map(key => ({
      value: key,
      label: dictObject[key]
    }));
  }
});
getDictValues({ dictType: 'metadata_constants', dictLabel: 'database_schema' }).then((res) => {
  if (res.data.dictValue) {
    const dictObject = JSON.parse(res.data.dictValue) || {};
    databaseSchema.value = Object.keys(dictObject).map(key => ({
      value: key,
      label: dictObject[key]
    }));
  }
});

// 删除功能实现

const handleDelete = (data) => {
  ElMessageBox.confirm('确认要删除该数据项吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOperator({ ids: [data.id] })
      .then((res) => {
        if (res) {
          ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
          getList();
        }
      })
      .catch(() => {
        ElMessage({ showClose: true, message: '删除失败。', type: 'error' });
      });
  });
};

// 分页功能实现
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: '',
  createByName: '',
  isAsc: 'descending'
});
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  getList();
};

// 查询功能实现
const doQuery = () => {
  getList();
};

// 重置功能实现
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    createByName: '',
    isAsc: 'descending'
  };
  getList();
};

// 获取列表数据
const getList = () => {
  loading.value = true;
  getDatabaseList(queryParams.value)
    .then((res) => {
      if (res) {
        metaList.value = res?.rows || [];
        loading.value = false;
        total.value = res?.total || 0;
      }
    })
    .catch(() => {
      metaList.value = [];
    });
};
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.database_type_management {
  height: calc(100vh - 84px);
  overflow: auto;
}
.pagenation {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>
